റിയാക്ട് experimental_SuspenseList മാനേജർ: സസ്പെൻസ് കോർഡിനേഷനിൽ വൈദഗ്ദ്ധ്യം നേടാം

            
import React, { Suspense } from 'react';

// A component that suspends until data is fetched
function MyComponent() {
  const data = useResource(fetchData()); // Hypothetical useResource hook
  return 
Data: {data}
;
}

function App() {
  return (
    Loading...

ഈ ഉദാഹരണത്തിൽ, MyComponent ഡാറ്റ ലഭ്യമാക്കാൻ സാങ്കൽപ്പികമായ useResource ഹുക്ക് ഉപയോഗിക്കുന്നു. ഡാറ്റ ഇതുവരെ ലഭ്യമല്ലെങ്കിൽ, കമ്പോണന്റ് സസ്പെൻഡ് ചെയ്യുകയും, ഡാറ്റ റിസോൾവ് ആകുന്നത് വരെ റിയാക്ട് ഫാൾബാക്ക് (<div>Loading...</div>) കാണിക്കുകയും ചെയ്യും.

experimental_SuspenseList പരിചയപ്പെടാം

experimental_SuspenseList എന്നത് ഒന്നിലധികം Suspense ബൗണ്ടറികളുടെ പ്രദർശനം ഏകോപിപ്പിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്ന ഒരു കമ്പോണന്റാണ്. അസിൻക്രണസ് ഡാറ്റയെ ആശ്രയിക്കുന്ന ഒരു കൂട്ടം ഐറ്റംസ് ഉള്ളപ്പോൾ ഇത് പ്രത്യേകിച്ചും ഉപയോഗപ്രദമാണ്. SuspenseList ഇല്ലാതെ, ഡാറ്റ ലഭ്യമാകുന്നതിനനുസരിച്ച് ഐറ്റംസ് ക്രമരഹിതമായി പ്രത്യക്ഷപ്പെട്ടേക്കാം. SuspenseList ഐറ്റംസ് വെളിപ്പെടുത്തുന്ന ക്രമം നിയന്ത്രിക്കാൻ നിങ്ങളെ അനുവദിക്കുന്നു, ഇത് കാഴ്ചയിലെ പ്രകടനവും ഉപയോക്തൃ അനുഭവവും മെച്ചപ്പെടുത്തുന്നു.

experimental_SuspenseList ഒരു പരീക്ഷണാത്മക ഘടകമായി കണക്കാക്കപ്പെടുന്നു, അതിനാൽ നിങ്ങൾ ഇത് എക്സ്പെരിമെന്റൽ ചാനലിൽ നിന്ന് ഇമ്പോർട്ടുചെയ്യണം:

            
import { unstable_SuspenseList as SuspenseList } from 'react';

            

              
                Copy
              
            
          

revealOrder പ്രോപ്പ്

SuspenseList-നുള്ള ഏറ്റവും പ്രധാനപ്പെട്ട പ്രോപ്പ് revealOrder ആണ്. ഈ പ്രോപ്പ് SuspenseList-നുള്ളിലെ Suspense ബൗണ്ടറികൾ വെളിപ്പെടുത്തുന്ന ക്രമം നിർണ്ണയിക്കുന്നു. ഇത് താഴെ പറയുന്ന മൂല്യങ്ങളിൽ ഒന്ന് സ്വീകരിക്കുന്നു:

• forwards: കമ്പോണന്റ് ട്രീയിൽ പ്രത്യക്ഷപ്പെടുന്ന ക്രമത്തിൽ Suspense ബൗണ്ടറികൾ വെളിപ്പെടുത്തുന്നു.
• backwards: കമ്പോണന്റ് ട്രീയിൽ പ്രത്യക്ഷപ്പെടുന്നതിന്റെ വിപരീത ക്രമത്തിൽ Suspense ബൗണ്ടറികൾ വെളിപ്പെടുത്തുന്നു.
• together: എല്ലാ ഡാറ്റയും ലഭ്യമായുകഴിഞ്ഞാൽ എല്ലാ Suspense ബൗണ്ടറികളും ഒരേസമയം വെളിപ്പെടുത്തുന്നു.

revealOrder="forwards" ഉപയോഗിച്ചുള്ള ഉദാഹരണം

നിങ്ങളുടെ കയ്യിൽ പ്രൊഡക്റ്റ് കാർഡുകളുടെ ഒരു ലിസ്റ്റ് ഉണ്ടെന്ന് കരുതുക, ഓരോ കാർഡിനും ഉൽപ്പന്നത്തിന്റെ വിശദാംശങ്ങൾ ലഭ്യമാക്കേണ്ടതുണ്ട്. revealOrder="forwards" ഉപയോഗിക്കുന്നത് ഡാറ്റ ലോഡ് ആകുന്നതിനനുസരിച്ച് കാർഡുകൾ മുകളിൽ നിന്ന് താഴേക്ക് ദൃശ്യമാകുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.

            
import React, { Suspense, unstable_SuspenseList as SuspenseList } from 'react';

function ProductCard({ productId }) {
  const product = useResource(fetchProduct(productId)); // Hypothetical fetchProduct function
  return (
    

      
{product.name}
      
{product.description}
    
  );
}

function App() {
  const productIds = [1, 2, 3, 4, 5];
  return (
    
      {productIds.map((productId) => (
        Loading product...